<template>
  <div class="lx-index__page">
    <!-- banner图 -->
    <banner-image />
    <div class="first-screen flex flex--b">
      <!-- 标题 -->
      <title-region />
      <!-- 波纹 -->
      <banner-wave @snap-next="snapNext" />
    </div>

    <!-- 页面主题内容 -->
    <div class="page__container flex" ref="pageContainerRef">
      <div class="side__content">
        <user-info />
        <hot-article-wall />
        <reword-wall />
      </div>
      <div class="right__content">
        <notice-box />
        <article-list />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import TitleRegion from "./TitleRegion.vue";
import BannerImage from "./BannerImage.vue";
import BannerWave from "@/components/BannerWave.vue";
import UserInfo from "./UserInfo.vue";
import HotArticleWall from "./HotArticleWall.vue";
import RewordWall from "./RewordWall.vue";
import ArticleList from "./ArticleList.vue";
import NoticeBox from "./NoticeBox.vue";
import { onMounted } from "vue";
import { useWebInfoStore } from "@/store/webInfo.store";
import { usePageScroll } from "./hooks/usePageScroll";
// 页面滚动下一屏幕
const { pageContainerRef, snapNext } = usePageScroll();
const { getWebInfo } = useWebInfoStore();
onMounted(() => {
  getWebInfo();
});
</script>

<style lang="scss" scoped>
.lx-index__page {
  // padding: 20px;
  position: relative;
  .first-screen {
    width: 100%;
    height: calc(100vh - var(--lx-header-height));
    flex-direction: column;
  }
  .page__container {
    padding: 40px;
    background-color: #fff;
  }
  .side__content {
    width: 30%;
    max-width: 300px;
    align-self: start;
  }
  .right__content {
    width: calc(70% - 20px);
    margin-left: 20px;
    align-self: start;
  }
}
</style>
